export default function updateNodeElement (newElement, virtualDOM, oldVirtualDOM = {}) {
    // 获取节点对应的属性对象
    const newProps = virtualDOM.props || {}
    // 获取旧的节点属性对象
    const oldProps = oldVirtualDOM.props || {}

    Object.keys(newProps).forEach(propsName => {
        const newPropsValue = newProps[propsName]
        const oldPropsValue = oldProps[propsName]

        if(newPropsValue !== oldPropsValue) {
        
            // 判断是否为事件属性 onClick -> click 
            if(propsName.slice(0, 2) === 'on') {
                // 事件名称
                const eventName = propsName.toLowerCase().slice(2)
                // 为元素添加事件
                newElement.addEventListener(eventName, newPropsValue)

                if(oldPropsValue){
                    // 删除原有的事件
                    newElement.removeEventListener(eventName, oldPropsValue)
                }
            
            }else if (propsName === 'value' || propsName === 'checked') { // 判断是否为 value 和 checked 
                newElement[propsName] = newPropsValue
            
            }else if (propsName !== 'children') {
                if (propsName === 'className'){
                    newElement.setAttribute('class', newPropsValue)
                }else {
                    //普通属性
                    newElement.setAttribute(propsName, newPropsValue)
                }
            }
        } 
    })
    // 判断属性被删除的情况
    Object.keys(oldProps).forEach(propsName => {
        const newPropsVale = newProps[propsName]
        const oldPropsValue = oldProps[propsName]
        if(!newPropsVale) {
            //属性被删除了
            if (propsName.slice(0, 2) == 'on') {
                const eventName = propsName.toLowerCase().propsName.slice(0, 2)
                newElement.removeEventListener(eventName, oldPropsValue)
            } else if(propsName !== 'children'){
                newElement.removeAttribute(propsName)
            }
        }
    })
}